<template name="commheader">
	<view>
		<view class="top">
			<view class="top_box">
				<view class="top_box_left">
					<image class="tou" src="http://thirdwx.qlogo.cn/mmopen/9kibjKzqKf8H12BxOk7T3UeBIfichjsb0noOibrn3741aZumfU1TvN7bbO7rr81sLguKmb4grCj3vL5hafzECGHmS7YMNDNQp0f/132"></image>
				</view>
				<view class="top_box_right">
					<view class="name_box">
						<view class="name">
							白芷
						</view>
						<view class="yaoma">
							邀请码：272416            	
						</view>
					</view>
					<view class="sle_box">
						<view class="sle_box_left">
							目前等级：<view class="dengji">小潮人</view>
						</view>
						<view class="sle_box_right">
							<navigator hover-class="none" url="" class="log_a">
								马上升级
							</navigator>
						</view>
					</view>
					<view class="sle_box" style="margin:20rpx 0;">
						潮人值:424 您离大潮人还需邀请3好友
					</view>
					
					<view>
						      <view class="progress_bar">
						          <view class="pro-bar">
						            <view class="progress_bar_title">
						              <view class="progress_number">50%</view>
						            </view>
						            <text class="progress-bar-inner" style="background-color: #1abc9c; width: 50%;" data-value="50" data-percentage-value="50"></text>
						          </view>
						        </view>
					</view>
					
					<view class="commis_btn">
						<view class="commis_btn_left">
								专属导师微信:
								<text @tap="getwx()">z13238330080</text>
						</view>
						<navigator class="commis_btn_right" hover-class="none" url="">潮人规则</navigator>
					</view>
					
				</view>
			</view>
		</view>
		<view class="gai_tp">
			<image class="gai_tp_img" src="../../static/logosm.png" mode="widthFix"></image>
			<view style="margin-left:5rpx;">距离LV0还差：0潮人值</view>
			<navigator hover-class="none" url="" class="gai_nav_a">
				<image src="../../static/tpjian.png" class="tpjian_img" mode="widthFix"></image>立即查看升级奖
			</navigator>
		</view>
	</view>
</template>

<script>
	export default{
		name:"commheader",
		data(){
			return{
				
			}
		},
		props:{
			
		},
		methods:{
			getwx (){
				uni.getClipboardData({  //复制微信号
				    success: function (res) {
				        console.log(res.data);
						uni.showToast({
						    title: '复制成功',
						    duration: 2000
						});
				    }
				});
			}
		},
		created	(){
			//设置微信号
			uni.setClipboardData({
			    data: 'z13238330080', 
			    success: function () {
					uni.hideToast();
			    }
			});
		}
	}
</script>

<style>
	.top{
		width:100%;
		padding:30rpx 0;
		background-color: #ff80c0;
		padding-bottom:65rpx;
	}
	.top_box{
		width:93%;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.top_box_left{
		width:20%;
	}
	.tou{
		width:120rpx;
		height:120rpx;
		border-radius: 120rpx;
	}
	.top_box_right{
		width:78%;
		color:#fff;
	}
	.name_box{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.name{
		max-width: 65%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size:28rpx;
		font-weight: 500;
	}
	.yaoma{
		font-size:23rpx;
	}
	.sle_box{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:5rpx 0;
	}
	.sle_box_left{
		display: flex;
		align-items: center;
	}
	.dengji{
		border:1rpx solid #fff;
		border-radius: 100rpx;
		padding:2rpx 10rpx;
		font-size:24rpx;
	}
	.log_a{
		border:1rpx solid #fff;
		border-radius: 100rpx;
		padding:2rpx 10rpx;
		font-size:23rpx;
	}
	
	.progress_bar{
	  width:98%;
	  margin: 0 auto;
	  margin-top: 10rpx;
	}
	.progress_bar .pro-bar {
	  background: hsl(0, 0%, 97%);
	  box-shadow: 0 2rpx 4rpx hsla(0, 0%, 0%, 0.1) inset;
	  height:8rpx;
	  position: relative;
	  top:5rpx;
	}
	.progress_bar .progress_bar_title{
	  /*color: hsl(218, 4%, 50%);*/
	  color: #ccc; 
	  font-size: 25rpx;
	  font-weight: 300;
	  position: relative;
	  z-index: 1;
	}
	.progress_bar .progress_number{
	 float: right;
	    color: #fff;
	    font-size: 24rpx;
	    margin-top: -35rpx;
	}
	.progress_bar .progress-bar-inner {
	  background-color: hsl(0, 0%, 88%);
	  display: block;
	  width: 0;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	  transition: width 1s linear 0s;
	  animation: animate-positive 2s;
	}
	.progress_bar .progress-bar-inner:before {
	  content: "";
	  background-color: hsl(0, 0%, 100%);
	  border-radius: 50%;
	  width: 8rpx;
	  height: 8rpx;
	  position: absolute;
	  right: 2rpx;
	  top: 0;
	  z-index: 1;
	}
	.progress_bar .progress-bar-inner:after {
	  content: "";
	  width: 28rpx;
	  height: 28rpx;
	  background-color: inherit;
	  border-radius: 50%;
	  position: absolute;
	  right: -8rpx;
	  top: -10rpx;
	}
	@-webkit-keyframes animate-positive{
	  0% { width: 0%; }
	}
	@keyframes animate-positive{
	  0% { width: 0%; }
	}
	.commis_btn{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top:28rpx;
	}
	.commis_btn_left{
		    font-size: 25rpx;
		    color: rgb(255, 128, 192);
		    font-weight: 400;
		    padding: 10rpx 20rpx;
		    background: rgb(255, 255, 255);
		    border-radius: 100rpx;
	}
	.commis_btn_right{
		    font-size: 25rpx;
		    display: inline-block;
		    padding: 10rpx 20rpx;
		    background: #ff79bd;
		    color: #fff;
		    border-radius: 100rpx;
		    font-weight: 300;
	}
	.gai_tp{
		    width: 90%;
		    padding: 5rpx 20rpx;
		    border-radius: 100rpx;
		    border: 4rpx solid #ff80c0;
		    overflow: hidden;
		    display: flex;
		    align-items: center;
		    justify-content: flex-start;
		    white-space: nowrap;
		    font-size: 22rpx;
		    margin: -50rpx auto 0;
		    background: #fff;
	}
	.gai_tp_img{
		width:80rpx;
	}
	.gai_nav_a{
		color:rgb(255, 128, 192);
		margin-left:5rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.tpjian_img{
		width:45rpx;
		margin:0 10rpx;
	}
</style>
